<template>
    <div class="user-add-wrap">
      <el-dialog title="新增用户" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <div class="user-add-form">
              <el-form label-position="right" label-width="80px">
                <el-form-item label="日期">
                  <el-date-picker
                    v-model="formLabelAlign.date"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="姓名">
                  <el-input v-model="formLabelAlign.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="地址" >
                  <el-input v-model="formLabelAlign.address" placeholder="请输入地址"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="cancelDialog">取 消</el-button>
              <el-button type="primary" @click="submitDialog">确 定</el-button>
            </span>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld1',
        props:{
          showDialog:{
            type:Boolean,
            default:false
          }
        },
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                dialogVisible:false,
                formLabelAlign:{
                  date:"",
                  name:"",
                  address:""
                }
            }
        },
        watch:{
          showDialog (val) {
            this.dialogVisible = val;
          }
        },
        methods:{
          cancelDialog () {
            this.dialogVisible = false;
            this.$emit('cancelDialog');
          },
          submitDialog() {
            this.dialogVisible = false;
            this.$emit('submitDialog');
          },
          handleClose () {
            this.cancelDialog();
          }
        }
    }
</script>
